import React from 'react';
import './InputField.css';

const InputField = ({ 
  type = 'text', 
  placeholder, 
  value, 
  onChange, 
  icon, 
  rightButton,
  showSendCode = false,
  sendCodeText = '发送验证码',
  onSendCode,
  className = '',
  ...props 
}) => {
  const handleChange = (e) => {
    onChange(e.target.value);
  };

  const renderIcon = () => {
    if (!icon) return null;
    
    const iconMap = {
      user: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="#999" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="#999" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
      code: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M16 18L22 12L16 6" stroke="#999" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M8 6L2 12L8 18" stroke="#999" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      )
    };

    return (
      <div className="input-field__icon">
        {iconMap[icon]}
      </div>
    );
  };

  if (showSendCode) {
    return (
      <div className={`input-field-group ${className}`}>
        <div className="input-field">
          {renderIcon()}
          <input
            type={type}
            placeholder={placeholder}
            value={value}
            onChange={handleChange}
            className="input-field__input"
            {...props}
          />
        </div>
        <button
          type="button"
          className="input-field__send-code-button"
          onClick={onSendCode}
        >
          {sendCodeText}
        </button>
      </div>
    );
  }

  return (
    <div className={`input-field ${className}`}>
      {renderIcon()}
      <input
        type={type}
        placeholder={placeholder}
        value={value}
        onChange={handleChange}
        className="input-field__input"
        {...props}
      />
      {rightButton && (
        <button
          type="button"
          className="input-field__right-button"
          onClick={rightButton.onClick}
        >
          {rightButton.text}
        </button>
      )}
    </div>
  );
};

export default InputField;
